<template>
  <div id="building">
    <!-- <div class="login-container"> -->

      
    
<el-card class="login-card">

  <h1 class="login-title">XSAP系统登录</h1>

  <div class="login-form">

    <el-form :model="loginForm" @submit.prevent="handleLogin">

      <el-row>
          <el-col :span="24">
              <el-form-item label="手机号" label-width="60px">
                  <el-input v-model="loginForm.phone" autocomplete="off" prefix-icon="user" maxlength="15" show-word-limit></el-input>
              </el-form-item>
          </el-col>
      </el-row>

      <el-row>
          <el-col :span="24">
              <el-form-item label="密 码" label-width="60px">
                  <el-input type="password" v-model="loginForm.password" autocomplete="off" prefix-icon="lock" show-password></el-input>
              </el-form-item>
          </el-col>
      </el-row>

      <el-row>
          <el-col :span="16">
              <el-form-item label="验证码" label-width="60px">
                  <el-input v-model="loginForm.captcha" autocomplete="off" prefix-icon="check"></el-input>
              </el-form-item>
          </el-col>

          <el-col :span="8">
              <!-- 绑定点击事件来更新验证码图片 -->
              <img :src="captchaUrl" @click="updateCaptcha" class="captcha-image" alt="验证码">
          </el-col>
      </el-row>
  
      <el-form-item style="margin-left: 20px;">
          <el-button type="primary" @click="handleLogin">登录</el-button>
      </el-form-item>
     
    </el-form>

    <!--不理解，这个作用是什么-->
    <RouterView />
  </div>

  <!-- 无帐号，点此注册 -->
  <el-row style="text-align: right;">
    <el-col>
      <el-text class="w-150px mb-2">
        若无帐号，点此>> <RouterLink to="/register" style="font-size: 1.2em;" @click="handleRegister()">注册</RouterLink>
      </el-text>
    </el-col>
  </el-row>
  
  </el-card>
  <!-- </div> -->

<!--下面最后一层div为背景图片框架-->
</div>

</template>



<script setup>
  import { ref } from 'vue';
  import { RouterLink } from 'vue-router'
  import {useRouter} from 'vue-router'
  import { login} from '@/api/login.js'


  // 验证码图片URL
  const captchaUrl = ref('/api/captcha');


  const handleLogin = () => {
    console.log('登录信息:', loginForm.value);
    login(loginForm.value).then(res => {
      console.log("后台返回数据res:",res)
      if(res.data.code === 200){
        console.log("后台成功返回数据res:")
        console.log(res)
        router.push('/home')
      }
      else if(res.data.code === 400){
        alert(res.data.message)
      }
      else{
        alert("请求失败,重新登录")
      }
      
      
      
      
    })
    .catch(err => {
      // error
      console.log(err)
    })
  }
  
  // 更新验证码的函数
  function updateCaptcha() {
    // 假设您的后端提供了一个接口来获取新的验证码图片
    // 这里使用一个简单的时间戳来模拟动态更新的URL
    captchaUrl.value = `/api/captcha/arithmetic?t=${new Date().getTime()}`;
  }

  // 定时更新验证码
  setInterval(updateCaptcha, 300000); // 每5分钟更新一次验证码
  
  const loginForm = ref({
    phone: '',
    password: '',
    captcha: ''
  });


   //定义一个验证码接收对象
   const getCaptcha=ref('')
  //定义一个验证码接收对象##

  captchaUrl.value='/api/captcha/arithmetic'
  
  const router  = useRouter()


  // function handleLogin() {
  //   console.log('登录信息:', loginForm.value);

  //   //向后端发送输入密码和用户名
  //   axios.post("/api/captcha/login",loginForm.value).then(res => {
  //     console.log(res.data)
  //       if(res.status == 200){
  //           //保存token
  //           token=getToken(res.data)
  //           localStorage.setItem("token",token)

  //           //登录成功
  //           //跳转到home页面
  //           router.push("/home")
  //       }else if(res.status == 502){
  //           alert("手机号错误，请重新输入")
  //           //更新验证码
  //           updateCaptcha()
  //       }
  //       else if(res.status == 202){
  //           alert("密码错误，请重新输入")
  //           //更新验证码
  //           updateCaptcha()
  //       }else{
  //           alert("验证码错误，请重新输入")
  //           //更新验证码
  //           updateCaptcha()
  //       }
  //   })
  // }



  function handleRegister() {
    console.log('注册信息:', loginForm.value);
    //跳转到路由的RegisterView.vue去
    router.push("/register")
  }

  // //2.通过axios获取后台数据
  // onMounted(() => {
  //       // //打开登录界面，自动获取验证码
  //       // axios.get("/api/captcha/getCaptcha").then(res => {
  //       //   console.log("res"+res.data)
  //       //     getCaptcha.value = res.data
  //       //     console.log("从后台取来的验证码为:",typeof getCaptcha.value)

  //       // })

  //       axios.get("/api/captcha/arithmetic").then(res => {
  //         console.log("res:"+res.data)
  //           getCaptcha.value = res.data
  //           console.log("从后台取来的验证码为:",typeof getCaptcha.value)

  //       })
  //   })

</script>

<style scoped>
    .login-container {
      margin: 0;
      

  }
  
  .login-card {
    margin: 0;
    width: 420px;
    padding: 20px;
    
    background-color: rgba(255, 255, 255, 0.6); /* 白色背景，80%透明度 */
  }
  .login-title {

    text-align: center;
    margin-bottom: 20px;
    color: #409eff;
  }
  .login-form {
    
    width: 100%;
    background-color: rgba(255, 255, 255, 0.0); /* 白色背景，80%透明度 */
  }

  .captcha-image {
    cursor: pointer; /* 当鼠标悬停时显示为可点击状态 */
    margin-left: 10px; /* 与输入框保持一定间距 */
    height: 36px; /* 控制图片高度，根据实际情况调整 */
    vertical-align: middle; /* 垂直居中对齐 */
    background-color: rgba(255, 255, 255, 0.0); /* 白色背景，80%透明度 */
}

  #building{
     /* 移除默认的外边距和内边距 */
    margin: 0;
    padding: 0;
    background:url("../assets/img/3.webp")center center no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh; /* 至少填充整个视口高度 */

    /* 使内容居中 */
    display: flex;
    justify-content: center;
    align-items: center;
  }


</style>